import React, { useEffect, useState } from 'react';
import './index.css';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { setFondName } from '@/store/actions/mutifonds';
export default function MutiFonds() {
  const [activeTab, setActiveTab] = useState('Tab 1');
  const [showMoreDropdown, setShowMoreDropdown] = useState(false);

  const fondName = useSelector((state: any) => state.mutifonds.fondName);
  const dispatch = useDispatch();

  const alltabs = ['HY公司', '凌云科技凌云科技凌云科技', '江南造船厂', '协鑫集团', '汉龙实业集团', '华夏久盈', '广东省研究院广东省研究院'];
  const tabs = alltabs.slice(0, 3);
  const moreTabs: any[] = alltabs.slice(3);

  useEffect(() => {
    dispatch(setFondName(tabs[0]));
    setActiveTab(tabs[0]);
    setShowMoreDropdown(true);
    return () => {};
  }, []);

  const handleTabClick = (tab: any) => {
    setActiveTab(tab);
    if (tab === 'More') {
      setShowMoreDropdown(true);
    } else {
      console.log(tab);
      dispatch(setFondName(tab));
    }
  };

  const handleMoreTabClick = (moreTab: any) => {
    dispatch(setFondName(moreTab));
  };

  return (
    <div className='tab-container'>
      {tabs.map((tab) => (
        <div key={tab} title={tab} className={`tab ${activeTab === tab ? 'active' : ''}`} onClick={() => handleTabClick(tab)}>
          {tab}
        </div>
      ))}
      {showMoreDropdown && (
        <div className={`tab more ${activeTab === 'More' ? 'active' : ''}`} onClick={() => handleTabClick('More')}>
          更多...
          <div className='more-dropdown'>
            {moreTabs.map((moreTab) => (
              <div key={moreTab} title={moreTab} className='dropdown-tab' onClick={() => handleMoreTabClick(moreTab)}>
                {moreTab}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
